<template>
    <!-- 组件的结构 -->
    <div class="student">
        <h1>{{ msg }}</h1>
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <h2>当前数值：{{ num }}</h2>
        <button @click="num++">点我数值++</button>
        <button @click="clickName">获取学生名称传给App</button>
        <button @click="unbind">解绑 defineMethod 事件</button>
        <button @click="death">销毁student组件的实例对象（VC）</button>

    </div>
</template>

<script>
    //  引入一个混合
    // 组件交互相关的代码（数据方法等）
    export default {
        name: "Stuent",
        data() {
            return {
                msg: "我是瑞子的人",
                name: "张三",
                sex: "男",
                num: 0
            };
        },
        methods: {
            clickName() {
                this.$emit("defineMethod", this.name, 787, 7878, 'sdfsfwr');
                // this.$emit('ceshi', 888)
               /* this.$emit('click', 888)*/
            },
            unbind() {
                //  解绑一个事件
                this.$off('defineMethod')
                //  解绑多个事件
                /* this.$off(['defineMethod', 'ceshi'])*/
                //  解绑所有的自定义事件
               /* this.$off();*/
            },
            death() {
                //  销毁当前 students 组件实例对象（vc）
                this.$destroy();
            }
        }
    };
</script>


<style lang="less">
    .student {
        background-color: yellow;
        padding: 5px;
        margin-top: 30px;
    }

</style>


